<template>
  <div class='container'>
    <el-card>
      <el-row>
      <!-- 上部搜索栏 -->
        <el-col :span="20">
            关键字：<el-input v-model="keyWord" style="width:200px"></el-input>
        </el-col>
        <el-col :span="4">
          <div style="float:right">
            <el-button @click="keyWord=''" size="small">清除</el-button>
            <el-button @click="screen" size="small" type="primary">搜索</el-button>
          </div>
        </el-col>
        <!-- 数据统计行 -->
         <el-col :span="24" style="background: #e5e9f2;padding:10px; color:gray;margin-top:10px" >
            <i class="el-icon-warning"></i>数据一共{{counts}}条
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template #default='{row}'>
            {{questionTypeList.filter(item => item.value === +row.questionType)[0].label }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="题目编号">
          <template #default='{row}'>
            <div
            v-for="(item,index) in row.questionIDs.length"
            :key="item.id">
            <a href="" style="color:#09f;"  @click.prevent="preview(row.questionIDs[index])">{{row.questionIDs[index].number}}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间"></el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间" width="80"></el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="100"></el-table-column>
        <el-table-column prop="userName" label="录入人" width="80"></el-table-column>
        <el-table-column label="操作" width="80">
          <template #default='{row}'>
            <el-button @click="delRandom(row.id)" type="danger" plain icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="counts"
        style="float:right;margin-top:10px">
      </el-pagination>
      <!-- 对话框 -->
      <el-dialog
        title="提示"
        :visible="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <span>此操作将永久删除该题组，是否继续？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="realDelRandom">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
      <!-- 预览框  -->
      <preview ref="preRef" :previewDialogVisible.sync='previewDialogVisible'></preview>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import { questionType as questionTypeList } from '@/api/hmmm/constants.js'
import preview from '../components/questions-previewran.vue'
export default {
  name: 'Randoms',
  components: { preview },
  data () {
    return {
      questionTypeList,
      keyWord: '', // 关联输入框
      page: 1,
      id: '',
      pagesize: 10,
      tableData: [], // 表格关联数据
      currentPage4: 1, // 分页器默认页面
      counts: 0, // 总数据
      dialogVisible: false, //
      previewDialogVisible: false
    }
  },
  created () {
    this.getRandomsList()
  },
  methods: {
    // 获取列表数据
    async getRandomsList () {
      const { data } = await randoms({ page: this.page, pagesize: this.pagesize, keyword: this.keyWord })
      console.log(data)
      this.tableData = data.items
      this.counts = data.counts
    },
    // 点击筛选更新列表数据
    screen () {
      // if (this.keyWord) {
      // console.log(this.keyWord)
      this.getRandomsList()
      // }
    },
    // 分页器
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      this.getRandomsList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getRandomsList()
    },
    // 关闭对话框
    handleClose () {
      this.dialogVisible = false
    },
    // 删除功能
    delRandom (id) {
      this.dialogVisible = true
      this.id = id
    },
    async realDelRandom () {
      const res = await removeRandoms({ id: this.id })
      console.log(res)
      this.getRandomsList()
      this.handleClose()
      this.$message.success('删除成功')
    },
    // 预览功能
    preview (str) {
      this.previewDialogVisible = true
      this.$refs.preRef.questionObj = str
    }
  }
}
</script>

<style scoped lang='less'></style>
